// 1. 下载 redux  npm i redux 注意redux是一个独立js库. 可以在任何js项目中使用
// 2. 引入 redux

// 假设: store中的数据是这样的: {count: 0, msg: '哈哈'}
import { createStore } from 'redux'
// 创建store的时候,要传入一个reducer函数.所以先定义reducer函数
// 给Store对象初始化数据
const initState = {
  count: 0,
  msg: '哈哈',
}

// reducer的调用时机:
// 1. 当我们创建store对象时,reducer函数会被调用一次,这一次就是为了初始化数据
// 2. 当执行store.dispatch的时候,render会被调用,这回是为了修改数据
function reducer(state = initState, action) {
  console.log('reducer执行了', state, action)
  // state 就是store中存储的数据
  // action 就是需求对象, action中必须要有一个type属性,描述需要类型
  switch (action.type) {
    case 'inc':
      // reducer函数return 什么, store中的数据就被改成了什么
      return {
        ...state,
        count: state.count + 1,
      }

    case 'add':
      return {
        ...state,
        count: state.count + action.num
      }
    // redux中的reducer中必须写一个default.而且default中的代码是固定的,就必须是return state. 原因: 就是创建store时,要初始化数据
    default:
      return state
  }
}
// 3. 创建store对象
// const store = createStore(reducer函数)
const store = createStore(reducer)

//查看store中的数据

// store.getState() //返回值就是store中的数据
// console.log(store.getState())

// store.subscibe可以监听store中数据的变化,数据变化,回调函数就会执行
store.subscribe(() => {
  console.log(store.getState())
})
// store.dispatch(action对象)
store.dispatch({ type: 'inc' })
store.dispatch({ type: 'add', num: 3})
